<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标移动效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas style="background-color: #000;"></canvas>
    <script>
        // 获取元素
        const can = document.querySelector('canvas')
        // 获取屏幕的宽高
        const w = window.innerWidth
        const h = window.innerHeight

        // 设置画板的宽高
        can.width = w
        can.height = h

        // 获取画笔
        const ctx = can.getContext('2d')

        // 创建一个球类
        class Circle{
            // 初始化求的x,y,半径,以及向存放球的数组中添加自己
            constructor(x,y,r,arr){
                this.x = x
                this.y = y
                this.r = r
                // 随机生成球的颜色
                this.color = `rgba(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.random()})`
                // 随机生成偏移方向
                this.px = Math.random() * 10 - 5
                this.py = Math.random() * 10 - 5
                // 往数组中添加自己
                arr.push(this)
            }

            // 画球方法
            reader(ctx){
                ctx.beginPath()
                ctx.arc(this.x,this.y,this.r,0,Math.PI * 2,true)
                ctx.fillStyle = this.color
                ctx.closePath()
                ctx.fill()
            }

            // 更新球的方法
            update(arr){
                this.x += this.px
                this.y += this.py
                this.r--
                // 如果半径小于0的时候从存放球的数组中移除它
                if(this.r < 0){
                    arr.forEach((item,index) => {
                        // 判断当前的球在存放球的数组中的那个位置
                        if(item === this){
                            // 从数组中删掉它
                            arr.splice(index,1)
                        }
                    })
                    // 返回false,如果数组中不存在就不重新绘制这个球
                    return false
                }
                return true
            }

        }


        // 创建存球的数组
        const arr = []

        // 监听鼠标移动事件
        document.onmousemove = (e) => {
            // 创建球,随机大小
            new Circle(e.clientX,e.clientY,Math.random() * 20,arr)
        }

        // 设置定时器更新画面
        setInterval(() => {
            // 清理一下上次的画布
            ctx.clearRect(0,0,w,h)
            arr.forEach(item => {
                item.update(arr) && item.reader(ctx)
            })
        },30)

    </script>
</body>
</html>